<template>
  <div class="basic">
    <div class="u-f">
      <div class="u-f1" style="margin-right: 30px;">

        <div class="ipt_list">
          <p class="lable font16 text_black">{{$t('运营商名称')}}：</p>
          <p class="font14 text_black">{{$t('输入运营商名称')}}</p>
          <el-input v-model="operator_name" :placeholder="$t('请输入')"></el-input>
        </div>
        <div class="ipt_list">
          <p class="lable font16 text_black">{{$t('域名')}}：</p>
          <p class="font14 text_black">{{$t('输入网站网址')}}:http://www:****.com</p>
          <el-input v-model="domain" :placeholder="$t('请输入')"></el-input>
        </div>
        <div class="ipt_list">
          <p class="lable font16 text_black">{{$t('联系人')}}：</p>
          <p class="font14 text_black">{{$t('填写联系人昵称或姓名')}}</p>
          <el-input v-model="username" :placeholder="$t('请输入')"></el-input>
        </div>
        <div class="ipt_list">
          <p class="lable font16 text_black">{{$t('联系电话')}}：</p>
          <p class="font14 text_black">{{$t('填写联系人电话号码')}}</p>
          <el-input v-model="phone" :placeholder="$t('请输入')"></el-input>
        </div>
        <div class="img_list">
          <p class="lable font16 text_black">{{$t('小程序公司图片')}}</p>
          <p class="font14 text_black">{{$t('小程序')}}“{{$t('关于我们')}}”{{$t('页面的公司图片')}}</p>
          <upload-img :onSuccess="handleSuccess" :text="$t('选择图片')"></upload-img>
          <div class="upload_img">
            <img :src="applets_img" @load="appletLoad" v-if="applets_img" />
          </div>

        </div>

      </div>

      <div class="u-f1" style="margin-left: 30px;">

        <div class="ipt_list">
          <p class="lable font16 text_black">{{$t('客服电话')}}：</p>
          <p class="font14 text_black">{{$t('在线客服电话号码')}}</p>
          <el-input v-model="cus_phone" :placeholder="$t('请输入')"></el-input>
        </div>
        
        <div class="ipt_list">
          <p class="lable font16 text_black">{{$t('区间推送开关')}}：</p>
          <p class="font14 text_black">{{$t('微信区间推送开关')}}</p>
          <el-switch
            v-model="wxswitch">
          </el-switch>
          <!-- <el-input v-model="cus_phone" :placeholder="$t('请输入')"></el-input> -->
        </div>

        <div class="ipt_list">
          <p class="lable font16 text_black">{{$t('区间推送时间')}}：</p>
          <p class="font14 text_black">{{$t('微信区间推送时间')}}</p>
          <div style="display: flex;align-items: center;"><el-input v-model="wxdate" :placeholder="$t('请输入')"></el-input><div style="width: 40px;">分钟</div></div>
          
        
        </div>

        <div class="ipt_list">
          <p class="lable font16 text_black">{{$t('地址')}}：</p>
          <p class="font14 text_black">{{$t('联系地址')}}</p>
          <el-input v-model="address" :placeholder="$t('请输入')"></el-input>
        </div>
        <div class="ipt_list">
          <p class="lable font16 text_black">{{$t('用户端显示附近商户的距离')}}：</p>
          <p class="font14 text_black">{{$t('小程序端显示附近多少公里距离的商户')}}</p>
          <el-input v-model="distance" :placeholder="$t('请输入')"></el-input>
        </div>
        <div class="editor_list">
          <p class="lable font16 text_black">{{$t('小程序简介')}}</p>
          <el-input
            type="textarea"
            autosize
            v-model="applets_remarks"
            :placeholder="$t('请输入')"
          ></el-input>
        </div>

      </div>
    </div>

    <el-button class="submit_btn" type="primary" @click="submit" v-if="permissions.indexOf('/set/save') != -1">{{$t('提交')}}</el-button>

  </div>
</template>

<script>
import util from '@/assets/js/util.js'
import { mapState } from 'vuex'
import uploadImg from "components/upload/me-upload-img.vue";
export default {
  name: 'basicInfo',
  data() {
    let that = this
    return {
      operator_name: '',
      cus_phone: '',
      domain: '',
      address: '',
      wxswitch: false,
      wxdate: '',
      username: '',
      distance: '5',
      phone: '',
      applets_img: '',
      applets_imgFile: '',
      applets_remarks: '',
    }
  },
  computed: {
    ...mapState(['token', 'ocode', 'permissions'])
  },
  components: { 
    uploadImg,
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      util.$http2('/set/info', {
        type: 'basic_info'
      })
      .then(res=>{
        if(res.code == 1) {
          this.operator_name = res.data.name
          this.cus_phone = res.data.service_tel
          this.domain = res.data.domain
          this.address = res.data.address
          this.wxswitch = res.data.wxswitch
          this.wxdate = res.data.wxdate
          //判断一下
          if(res.data.wxswitch=="true"){
            this.wxswitch=true;
          }else{
            this.wxswitch=false;
          }

          this.username = res.data.contacts
          this.distance = res.data.distance
          this.phone = res.data.mobile
          this.applets_remarks = res.data.introduce
          this.applets_img = res.data.logo
        }
      })
    },
    handleSuccess(file, url) {
      this.applets_imgFile = file
      this.applets_img = url
    },
    appletLoad() {
      window.URL.revokeObjectURL(this.applets_img);
    },
    submit() {
      let formData = new FormData()
      formData.append('type', 'basic_info')
      formData.append('name', this.operator_name)
      formData.append('service_tel', this.cus_phone)
      formData.append('domain', this.domain)
      formData.append('address', this.address)
      formData.append('wxswitch', this.wxswitch)
      formData.append('wxdate',this.wxdate)
      formData.append('contacts', this.username)
      formData.append('distance', this.distance)
      formData.append('mobile', this.phone)
      formData.append('introduce', this.applets_remarks)
      formData.append('logo', this.applets_imgFile)
      util.$http('/set/save', formData)
      .then(res=>{
        if(res.code == 1) {
          this.$message({
            message: res.msg,
            type: 'success'
          })
          this.getData()
        }
      })
    },
  }
}
</script>

<style scoped>
.basic{
  padding: 10px 20px 30px;
}
.basic .ipt_list {
  max-width: 400px;
  margin-bottom: 20px;
}
.basic .ipt_list p{
  margin: 0 0 10px;
}
.basic .ipt_list .lable {
  font-weight: bold;
}
.basic .img_list {
  max-width: 400px;
  margin-bottom: 20px;
}
.basic .img_list p{
  margin: 0 0 10px;
}
.basic .img_list .lable {
  font-weight: bold;
}
.basic .img_list .upload_img{
  width: 200px;
  height: 200px;
  margin-top: 20px;
}
.basic .img_list img{
  width: 100%;
  height: 100%;
}
.basic .editor_list {
  margin-bottom: 20px;
}
.basic .editor_list p{
  margin: 0 0 10px;
}
.basic .editor_list .lable {
  font-weight: bold;
}
.submit_btn{
  margin-top: 30px;
}
</style>
<style>
.basic .editor_list .el-textarea__inner {
  min-height: 200px !important;
}
</style>